<template>
	<div class='cont'>
		<view class="content">
			<!-- <view class="cu-bar topCont">
				<div style='display: flex;align-items: center;'>
					<span class='timeIcon'></span>本周已学 <span style='color: #1C81DF;display: inline-block;margin: 0 10rpx;'>0</span> 分钟
				</div>
			</view> -->
			<!-- <div style="height: 80rpx;"></div> -->
			<div class='list'>
				<div class='listItem' v-for='(item,index) in listData' :key='index' @click='toNext(item) '>
					<img :src="item.book_image" alt="" class='coverImg'>
					<div class='name'>{{item.book_name}}</div>
				</div>
				
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
			</div>
			<div style='height: 100rpx;'></div>
		</view>
		<!-- <TabBar></TabBar> -->
	</div>
</template>

<script>
	// import TabBar from '@/components/TabBar.vue'
	export default {
		data() {
			return {
				// searchVal: '',
				listData: [],
				page_index:1,
				page_num:18,
				count:0
			};
		},
		components: {
			// TabBar,
		},
		onLoad() {},
		
		onShow() {
			//console.log('start执行了onShow');
			// 生产
			// uni.setStorageSync('token', 'f239d0d31b934bfc915cd60bafda92cd');
			// this.getNews()
		},
		watch: {
			searchVal(val) {
				//console.log('val==', val)
			},
		},
		mounted() {
			//console.log('start执行了mounted');
			// uni.setStorageSync('token', 'f239d0d31b934bfc915cd60bafda92cd');
			this.init()
		},
		onHide() {
			//console.log('start执行了onHide');
		},
		beforeDestroy() {
			//console.log('start执行了beforeDestroy');
		},
		onReachBottom() {
			//console.log(this.count/this.page_index)
			if (this.count/this.page_index>this.page_num) {
				this.page_index++;
				this.getBooks();
				//console.log('加载更多');
			} else {
				//console.log('没有更多了');
			}
		},
		methods: {
			init(){
				this.listData= []
				this.page_index=1
				this.page_num=18
				this.count=0
				this.getBooks()
			},
			getBooks(){
				let _this = this;
				_this.uniRequest({
					url: `/book_shelf`,
					method: 'post',
					data: {
						page_index: _this.page_index,
						page_num: _this.page_num
					},
					success: res => {
						//console.log('消息列表返回值', res);
						if (res.code == 200) {
							// this.listData =res.data.books;
							this.listData =this.listData.concat(res.data.books) ;
							this.count=res.data.count
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			getMore(){
				if (this.count/this.page_index>this.page_num) {
					this.page_index++;
					this.getBooks();
					//console.log('加载更多');
				} else {
					//console.log('没有更多了');
				}
			},
			toNext(item) {
				uni.navigateTo({
					url: `/pages/book/details?id=${item.book_id}&from=1`
				});
				//console.log('tohtml==', item)
			},
		}
	};
</script>

<style lang="less" scoped>
	// .cont {
	// 	margin: 0;
	// 	padding: 0;
	// 	background-color: white;
	// 	width: 100vw;
	// 	height: 100vh;
	// 	position: relative;
	// }

	.content {
		background-color: white;
		width: 100vw;
		min-height: 100vh;
		position: absolute;
		top: 0;
		overflow: auto;
background: #ece8e5;
		.topCont {
			height: 76rpx;
			position: fixed;
			top: 0;
			left: 0;
			background-color: white;
			// background-color: red;
			width: 100%;
			z-index: 99;
			padding: 32rpx;
			text-align: left;
			color: #181E27;

			.timeIcon {
				display: inline-block;
				background: url(@/static/imgs/icon_shujia_time.png) no-repeat center;
				background-size: 100% 100%;
				width: 34rpx;
				height: 34rpx;
				margin-right: 15rpx;
			}
		}


		//书架
		.list {
			padding: 0 32rpx 32rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.listItem {
				width: 208rpx;
				display: inline-block;
				text-align: center;
				vertical-align: top;
				padding-top: 32rpx;
				margin: 0;
				.coverImg {
					width: 208rpx;
					height: 268rpx;
					border-radius: 12rpx;
				}

				.name {
					width: 208rpx;
					font-size: 26rpx;
					color: #181E27;
					line-height: 36rpx;
					font-weight: normal;

					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}

			>i {
				width: 208rpx;
			}
		}
	}
</style>
